<template>
  <el-menu :class="[
      'learun-el-menu',
      `learun-el-menu-${this.type}`,
      { 'learun-el-menu-collapse': lr_isCollapse && mode == 'vertical' },
    ]" :unique-opened="false" :default-active="nowTagValue" :mode="mode" :collapse="lr_isCollapse && mode == 'vertical'"
    ref="elMenuDom">
    <template v-for="item in showMenus">
      <el-menu-item v-if="getChildern(item).length == 0" :index="item.f_ModuleId" @click="open(item)"
        :key="item.f_ModuleId">
        <div :class="['el-menu__item-wraper']">
          <i :class="[item.f_Icon, 'el-menu__icon']"></i>
          <span v-if="item.f_FullName" :alt="item.f_ModuleId" class="el-menu__text"
            style="font-weight:600;">{{ $t(item.f_FullName) }}</span>
        </div>
      </el-menu-item>
      <el-submenu v-else :index="item.f_ModuleId" :key="item.f_ModuleId" :popper-class="popperClass">
        <div @click="open(item)" :class="['el-menu__item-wraper']" slot="title">
          <i :class="[item.f_Icon, 'el-menu__icon']"></i>
          <span v-if="item.f_FullName" class="el-menu__text" style="font-weight:600;">{{
            $t(item.f_FullName)
          }}</span>
        </div>
        <template v-for="child in getChildern(item)">
          <el-menu-item :index="child.f_ModuleId" :key="child.f_ModuleId" @click="open(child)"
            v-if="getChildern(child).length == 0">
            <div class="el-menu__item-wraper">
              <i v-if="lr_theme.showIcon" :class="[child.f_Icon, 'el-menu__icon']"></i>
              <i v-else style="width:10px"></i>
              <span v-if="child.f_FullName" class="el-menu__text">{{
                $t(child.f_FullName)
              }}</span>
            </div>
          </el-menu-item>
          <menu-item v-else :menu="child" :key="child.f_ModuleId" :collapse="lr_isCollapse"
            :popperClass="popperClass" />
        </template>
      </el-submenu>
    </template>
  </el-menu>
</template>

<script>
import { mapGetters } from "vuex";
import menuItem from "./menuItem";

export default {
  components: { menuItem },
  props: {
    mode: {
      type: String,
      default: "vertical",
    },
    popperClass: {
      type: String,
      default: "learun-more-dark-el-menu",
    },
    isAutoWidth: Boolean,
    onlyFirstMenu: {
      type: Boolean,
      default: false,
    }, // 只显示第一级菜单
    level: {
      type: Number,
      default: 1,
    },
    type: {
      type: String,
      default: "dark", // dark,light
    },
  },
  data() {
    return {
      firstMenus: [],
      moreMenus: {
        f_ModuleId: "learun_more_menu",
        f_Icon: "el-icon-more",
        f_FullName: "",
        children: [],
      },
      moreBtnWidth: 56,
      timer: null,
    };
  },

  computed: {
    ...mapGetters(["modules", "menu", "modulesGroup", "screen", "moduleMap"]),
    allmenu() {
      const menu = this.modulesGroup["0"] || [];
      return this.filterMenu(menu);
    },
    meuns() {
      return this.filterMenu(this.menu);
    },
    showMenus() {
      if (this.isAutoWidth) {
        return this.firstMenus;
      } else if (
        ["mix"].includes(this.lr_theme.nav) ||
        this.level == 2
      ) {
        return this.meuns;
      } else {
        return this.allmenu;
      }
    },
    nowTagValue: function () {
      const url = this.$router.$lrRouter.getValue(this.$route);
      const module = this.modules.find((t) => t.f_UrlAddress == url);
      if (module && module.f_IsMenu == 1) {
        if (this.onlyFirstMenu) {
          return this.getParentId(module.f_ModuleId);
        } else {
          return module.f_ModuleId;
        }
      } else {
        if (this.onlyFirstMenu) {
          return this.allmenu[0].f_ModuleId;
        } else {
          return "";
        }
      }
    },
  },
  watch: {
    screen() {
      if (this.isAutoWidth) {
        this.resizeMenu();
      }
    },
    allmenu: {
      handler() {
        if (this.isAutoWidth) {
          if (this.timer == null) {
            this.timer = setTimeout(() => {
              this.timer = null;
              this.init();
              this.openDefaultSubMenus()
            }, 50);
          }
        }
      },
      immediate: true,
    },
    nowTagValue() {
      this.openDefaultSubMenus()
    },
  },
  mounted() {
    this.openDefaultSubMenus()
  },
  methods: {
    init() {
      this.firstMenus = this.allmenu;
      setTimeout(() => {
        if (this.isAutoWidth) {
          this.$nextTick(() => {
            let index = 0;
            this.$refs.elMenuDom.$children.forEach((ele) => {
              var item = this.allmenu[index];
              if (item) {
                item._width = this.$getElemWidth(ele.$el);
                index++;
              }
            });

            this.resizeMenu();
          });
        }
      }, 100);
    },
    resizeMenu() {
      let menuWidthWraper = this.$getElemWidth(this.$refs.elMenuDom.$el);
      let menuWidth = 0;
      let firstMenus = [];
      let moreMenus = [];
      let len = this.allmenu.length;
      let index = 1;

      this.allmenu.forEach((item) => {
        menuWidth += item._width;
        if (
          menuWidth > menuWidthWraper ||
          (menuWidth + this.moreBtnWidth > menuWidthWraper && len > index)
        ) {
          moreMenus.push(item);
        } else {
          firstMenus.push(item);
        }
        index++;
      });
      if (moreMenus.length > 0) {
        this.moreMenus.children = moreMenus;
        firstMenus.push(this.moreMenus);
      }

      this.firstMenus = firstMenus;
    },
    filterMenu(menu) {
      const res = menu.filter((item) => {
        if (item.f_EnabledMark == 1 && item.f_IsMenu == 1) {
          if (this.loginInfo.f_SecurityLevel == 1) {
            return true;
          } else {
            const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
            if (moduleAuthIds.indexOf(item.f_ModuleId) > -1) {
              return true;
            } else {
              return false;
            }
          }
        }
      });
      return res;
    },

    getParentId(id) {
      if (this.moduleMap[id] && this.moduleMap[this.moduleMap[id].f_ParentId]) {
        return this.getParentId(this.moduleMap[id].f_ParentId);
      } else {
        return id;
      }
    },

    getChildern(item) {
      if (item.f_ModuleId == "learun_more_menu") {
        return item.children;
      }

      if (this.onlyFirstMenu) {
        return [];
      }

      const _modules = this.modulesGroup[item.f_ModuleId] || [];
      const res = _modules.filter((item) => {
        if (item.f_EnabledMark == 1 && item.f_IsMenu == 1) {
          if (this.loginInfo.f_SecurityLevel == 1) {
            return true;
          } else {
            const moduleAuthIds = this.loginInfo.moduleAuthIds || [];
            if (moduleAuthIds.indexOf(item.f_ModuleId) > -1) {
              return true;
            } else {
              return false;
            }
          }
        }
      });
      return res;
    },
    open(item) {
      if (item.f_Target == "expand") {
        if (this.onlyFirstMenu) {
          this.$store.commit(
            "system/module/SET_MENU",
            this.modulesGroup[item.f_ModuleId] || []
          );
          return false;
        }
      } else {
        this.$emit('openMenu', item)
        this.$router.$lrRouter.goto(item);
      }
    },
    openDefaultSubMenus() {
      if (this.onlyFirstMenu) {
        this.$store.commit(
          "system/module/SET_MENU",
          this.modulesGroup[this.moduleMap[this.nowTagValue].f_ModuleId] || []
        );
      }
    },
  },
};
</script>


